<template>
  <n-card :bordered="false" class="proCard">
    <div>
      <QueryForm v-model="queryForm" @submit="reloadTable">
        <!--        <template #more="{ queryForm }">-->
        <!--          <n-form-item label="姓名">-->
        <!--            <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
        <!--          </n-form-item>-->
        <!--          <n-form-item label="姓名">-->
        <!--            <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
        <!--          </n-form-item>-->
        <!--          <n-form-item label="姓名">-->
        <!--            <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
        <!--          </n-form-item>-->
        <!--          <n-form-item label="姓名">-->
        <!--            <n-input v-model:value="queryForm['111']" placeholder="输入姓名" />-->
        <!--          </n-form-item>-->
        <!--        </template>-->
        <template #default="{ queryForm }">
          <n-form-item label="系统名称">
            <n-input v-model:value="queryForm['appName-like']" placeholder="输入姓名" />
          </n-form-item>
          <n-form-item label="系统状态">
            <n-select style="width: 200px" v-model:value="queryForm['enabled']"
                      :options="enabledOptions" />
          </n-form-item>
          <n-form-item label="创建时间">
            <n-date-picker value-format="yyyy-MM-dd HH:mm:ss"
                           v-model:formatted-value="queryForm['createTime-gte']" type="datetime"
                           placeholder="开始时间" />
            <span class="ml-3 mr-3">-</span>
            <n-date-picker alue-format="yyyy-MM-dd HH:mm:ss"
                           v-model:formatted-value="queryForm['createTime-lte']" type="datetime"
                           placeholder="结束时间" />
          </n-form-item>
          <n-form-item label="关键字">
            <n-input v-model:value="queryForm['searchKey']" placeholder="请输入查询关键字" />
          </n-form-item>
        </template>

      </QueryForm>
    </div>
    <div>
      <n-space>
        <n-button type="primary" @click="doSaveModal()">
          新建
        </n-button>
        <n-button type="warning" @click="doUpdateModal()">
          编辑
        </n-button>
        <n-button type="error" @click="doDeleteModal()">
          删除
        </n-button>
      </n-space>
    </div>
    <BasicTable
      :columns="tableColumns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="tableRef"
      @update:checked-row-keys="onCheckedRowEvent"
      :scroll-x="1090"
    >
      <template #tableTitle>
      </template>
      <template #toolbar>
      </template>
    </BasicTable>

  </n-card>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { BasicTable } from "@/components/Table";
import SysAppApi from "@/views/SysApp/httpApi";
import { QueryForm } from "@/components/QueryForm";
import {
  checkedRows,
  doDeleteModal,
  doSaveModal,
  doUpdateModal,
  onCheckedRowEvent,
  queryForm,
  tableColumns
} from "@/views/SysApp/Service";

export default defineComponent(
  {
    components: { BasicTable, QueryForm },
    setup() {
      const tableRef = ref<any>();
      const loadDataTable = async (res) => {
        console.log("表单参数:{}", queryForm.value);
        checkedRows.value=[];
        return await SysAppApi.doSelectPageList({
          searchKey: null,
          ...res,
          ...queryForm.value
        });
      };
      function reloadTable() {
        tableRef.value.reload();
      }

      return {
        loadDataTable,
        reloadTable,
        tableColumns,
        onCheckedRowEvent,
        queryForm,
        tableRef,
        doSaveModal,
        doUpdateModal,
        doDeleteModal
      };
    }
  }
);


</script>

<style lang="less" scoped></style>
